<template>
  <div class="air-box">
    <div class="operation-box">
      <div class="operation-line">
        <el-button :type="buttonType" v-on:click="handleOnOff('ON')" :disabled="!device.online" class="button-fixed">
          <i style="color:#ffffff" class="el-icon-switch-button"></i>{{$t('device.TurnOn')}}
        </el-button>
        <el-button :type="buttonType" v-on:click="handleOnOff('OFF')" :disabled="!device.online" class="button-fixed">
          <i style="color:#ffffff" class="el-icon-switch-button"></i>{{$t('device.TurnOff')}}
        </el-button>
      </div>
      <div class="operation-line">
        <span>
          <el-switch :type="buttonType" v-model="coolMode" :active-text="$t('device.CoolMode')"
            :inactive-text="$t('device.HeatMode')" active-color="danger" :disabled="!device.online"
            inactive-color="info" v-on:change="handleMode" />
        </span>
      </div>
      <div class="operation-line">
        <el-button :type="buttonType" v-on:click="handleTemp('ADD')" :disabled="!device.online" class="button-fixed">
          {{$t('device.Temperature')}}
          <i style="color:#ffffff" class="el-icon-plus"></i>
        </el-button>
        <el-button :type="buttonType" v-on:click="handleTemp('SUB')" :disabled="!device.online" class="button-fixed">
          {{$t('device.Temperature')}}
          <i style="color:#ffffff" class="el-icon-minus"></i>
        </el-button>
      </div>
    </div>
    <div class="current-box">
      <el-form v-if="device.online">
        <el-form-item v-if="voltage !== undefined && voltage !== null">
          {{voltage}}V
        </el-form-item>
        <el-form-item v-if="current !== undefined && current !== null">
          {{current}}A
        </el-form-item>
      </el-form>
    </div>
    <div class="chart-box">
      <div ref="tempChart" class="chart"></div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts/core'
  import {
    TitleComponent
  } from 'echarts/components';
  import {
    PieChart
  } from 'echarts/charts';
  import {
    LabelLayout
  } from 'echarts/features';
  import {
    CanvasRenderer
  } from 'echarts/renderers';

  echarts.use([TitleComponent, PieChart, CanvasRenderer, LabelLayout]);
  var optionWZ = {
    // backgroundColor: '#0B2C6F',
    // 标题
    title: {
      //text: '{num|' + dataACTemp.value + '℃}',

      x: '49%',
      y: '20%',
      textAlign: 'center',
      textStyle: {
        rich: {
          num: {
            fontWeight: '500',
            color: '#0a8dd3',
            fontFamily: '微软雅黑',
            fontSize: 35,
          },
        }
      },
      subtextStyle: {
        color: '#0a8dd3',
      }
    },
    series: [{ // 主圆环
      name: 'ACTEMP',
      type: 'pie',
      radius: ['85%', '95%'],
      center: ['50%', '50%'],
      startAngle: 225,
      endAngle: -45,

      color: ['#0a8dd3', 'transparent'],
      hoverAnimation: false,
      legendHoverLink: false,
      z: 10,
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [{
        value: 14 - (30 - 16)

      }, {
        value: 14 / 3 + (30 - 16)

      }]
    }, { // 中间圈
      name: '',
      z: 5,
      type: 'pie',
      cursor: 'default',
      radius: ['90%', '90%'],
      center: ['50%', '50%'],
      startAngle: 225,
      endAngle: -45,
      hoverAnimation: false,
      legendHoverLink: false,
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [{
        value: 75,
        itemStyle: {
          borderColor: '#b2b6b9',
          borderType: [5, 8],
          borderDashOffset: 5,
          borderWidth: 2,
        }
      }, {
        value: 25,
        itemStyle: {
          color: 'transparent',
        }
      }]
    }]
  };
  import BaseController from './BaseController'
  import deviceAPI from "@/api/device/device";

  export default {
    name: 'AirCondition',
    mixins: [BaseController],
    data() {
      return {
        powerOn: false,
        coolMode: true, // 0 :hot,1:cold
        temperature: 16,
        chart: null,
        current: null,
        voltage: null,
      }
    },
    created() {
      this.coolMode = this.getItem('ACMode', true)
      this.temperature = this.getItem('ACTemp', 16)
    },
    mounted() {
      setTimeout(this.createChart, 350)
    },
    methods: {
      setItem(key, value) {
        localStorage.setItem(this.device.code + '_' + key, value)
      },
      getItem(key, value) {
        const v = localStorage.getItem(this.device.code + '_' + key)
        if (v !== undefined && v !== null) {
          return v
        }
        return value
      },
      setItemDevice(device) {
        const code = device.code
        const json = device.map
        if (!json) {
          return
        }
        if (code.includes("ROW_RELAY")) {
          if (json.ENERGY) {
            const data = json.ENERGY
            this.voltage = data.Voltage
            this.current = data.Current
          }
          return
        }
        if (code.includes("IR_CONTROL")) {
          return
        }
        if (code.includes("BleGate_")) {
          if (json.IrStatus == 5) {
            return
          }
          this.voltage = json.Voltage
          this.current = json.Current
          return
        }
        console.warn('air-condition code is not start with IR_CONTROL/ROW_RELAY/BleGate_ : ', device)
        // this.voltage = relay.stateJson.Voltage + "V"
        // this.current = relay.stateJson.Current + "A"
      },
      createChart() {
        const el = this.$refs['tempChart']
        this.chart = echarts.init(el);
        this.chart.setOption(optionWZ)
        this.updateChart(this.temperature);
      },
      sendBleCommand() {
        const code = this.device.code
        const {
          temperature,
          powerOn,
          coolMode
        } = this
        const operate = powerOn ? coolMode ? 'COOL' : 'HEAT' : 'OFF'
        const params = temperature + ''
        this.doOperate(code, operate, params)
      },
      handleOnOff(onOff) {
        this.powerOn = onOff === 'ON'
        const code = this.device.code
        const action = this.$t(this.powerOn ? 'On' : 'Off')
        this.updateChart(this.temperature);

        if (code.indexOf('BleGate_') == 0) {
          this.sendBleCommand()
          return
        }
        if (code.indexOf('IR_CONTROL_') >= 0) {
          const command = 'SSerialSend5'
          const content = (this.coolMode ? 'COOL_' : 'HEAT_') + onOff
          deviceAPI.command({
            code,
            command,
            content,
            action
          });
        }
      },
      handleMode() {
        this.powerOn = true
        this.setItem("ACMode", this.coolMode)
        this.updateChart(this.temperature);

        const code = this.device.code
        if (code.indexOf('BleGate_') >= 0) {
          this.sendBleCommand()
          return
        }
        if (code.indexOf('IR_CONTROL_') >= 0) {
          const command = 'SSerialSend5'
          const content = (this.coolMode ? 'COOL_' : 'HEAT_') + (this.powerOn ? 'ON' : 'OFF')
          deviceAPI.command({
            code,
            command,
            content
          });
        }
      },
      handleTemp(cmd) {
        this.powerOn = true
        var changed = false
        if (cmd === 'ADD' && this.temperature < 30) {
          this.temperature++
          changed = true
        } else if (cmd === 'SUB' && this.temperature > 16) {
          this.temperature--
          changed = true
        }
        if (!changed) {
          return
        }
        this.setItem("ACTemp", this.temperature)
        this.updateChart(this.temperature);

        const code = this.device.code
        if (code.indexOf('BleGate_') >= 0) {
          this.sendBleCommand()
          return
        }
        if (code.indexOf('IR_CONTROL_') >= 0) {
          const command = 'SSerialSend5'
          const content = (this.coolMode ? 'COOL_' : 'HEAT_') + this.temperature
          deviceAPI.command({
            code,
            command,
            content
          });
        }
      },
      updateChart(temp) {
        const {
          powerOn,
          coolMode,
        } = this
        const modeText = coolMode ? this.$t('device.CoolMode') : this.$t('device.HeatMode')
        const subtext = this.$t('device.AirConditionTemperature', [modeText])
        this.chart.setOption({
          title: {
            text: '{num|' + temp + '℃}',
            subtext,
            subtextStyle: {
              color: powerOn ? '#409EFF' : '#909399'
            }
          },
          series: {
            name: 'ACTEMP',
            data: [{
              value: temp - 16
            }, {
              value: 12
            }]
          }
        });
      }
    }
  }

</script>
<style scoped>
  .air-box {
    display: flex;
  }

  .operation-box {
    /* text-align: center; */
    width: 220px;
  }

  .operation-line {
    margin-bottom: 5px;
  }

  .current-box {
    text-align: center;
    width: 40px;
    flex-grow: 1;
  }

  .chart-box {
    /* text-align: center; */
    width: 180px;
    flex-grow: 1;
  }

  .chart {
    min-width: 180px;
    min-height: 100px;
    width: 100%;
    height: 100%;
  }

</style>
